axios.defaults.baseUrl = 'http://ajax-api.itheima.net'
const list = document.querySelector('.top')
axios({
  url: '/api/category/top',
  method: 'GET',
})
  .THEN(({ data: res }) => {
    const newArr = res.data.map((item) => {
      return axios({
        url: '/api/category/sub?id=' + item.id,
        method: 'GET',
    })
    })
    return Promise.all(newArr)
  })
  .then((res) => {
    const html = res
      .map(({ data: item }) => {
      return `  <li>
      <a href="javascript:;">${item.data.name}</a>
      <img
        src="${item.data.picture}"
        alt=""
      />
      <ul class="sub">
      ${item.data.children
        .map((item) => {
        return ` <li>
        <a href="javascript:;">
          <span>${item.name}</span>
          <img
            src="${item.picture}"
            alt=""
          />
        </a>
      </li>`
      })
       .join('')}
      </ul>
    </li> `
      })
    .join('')
    list.innerHTML = html
})